<template>
  <div>
    <van-button
      type="default"
      @click="addShow = true"
      style="background: rgba(0, 0, 0, 0)"
      >添加班级</van-button
    >
    <table>
      <tr>
        <td>创建时间</td>
        <td>班级名称</td>
        <td>所属学校</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, index) in class_list" :key="index">
        <td>{{ datetime(item.create_date) }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.school_name }}</td>
        <td>
          <van-button
            type="default"
            @click="del_class(item.id)"
            style="background: rgba(0, 0, 0, 0)"
            >删除</van-button
          >
        </td>
      </tr>
    </table>
  </div>

  <van-popup v-model:show="schoolShow" round position="bottom">
    <van-picker
      :columns="schools_list"
      @cancel="schoolShow = false"
      @confirm="schools_name"
    >
      <template #option="option">
        {{ option.name }}
      </template>
    </van-picker>
  </van-popup>

  <van-dialog
    title="添加班级"
    v-model:show="addShow"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="add_class">
      <van-field placeholder="班级名称" v-model="add_name" maxlength="20" />

      <van-field
        v-model="school_name"
        is-link
        readonly
        placeholder="所属学校"
        @click="schoolShow = true"
      />

      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>
</template>

<script>
import { datetime } from "../utils/utils";
export default {
  data() {
    return {
      datetime,
      class_list: "",
      nameShow: false,
      add_name: "",
      upd_name: "",
      addShow: false,
      id: "",
      schools_list: "",
      school_name: "",
      school_id: "",
      schoolShow: false,
    };
  },
  mounted() {
    this.class_show();
    this.school_show();
  },
  methods: {
    class_show: function () {
      this.myaxios(this.host + "user/clbums/", "get").then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.class_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    school_show: function () {
      this.myaxios(this.host + "user/schools/", "get").then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.schools_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    schools_name: function (val) {
      this.school_name = val.name;
      this.school_id = val.id;
      this.schoolShow = false;
    },
    add_class: function () {
      this.myaxios(this.host + "user/clbums/", "post", {
        name: this.add_name,
        school_id: this.school_id,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.class_show();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    del_class: function (id) {
      this.myaxios(this.host + "user/clbum/" + id + "/", "delete").then(
        (data) => {
          console.log(data);
          if (data.code == 200) {
            this.$toast.success(data.msg);
            this.class_show();
          } else {
            this.$toast.fail(data.msg);
          }
        }
      );
    },
  },
};
</script>

<style>
</style>